<div id="WorkflowAdmin">
    <div class="ui warning message" *ngIf="workflow.from_repository && workflow.from_repository.length > 0">
        {{'workflow_ascode_no_edit' | translate}}
    </div>
    <app-zone header="{{ 'common_icon' | translate }}">
        <app-zone-content class="bottom">
            <div class="ui form">
                <div class="fields">
                    <div class="eleven wide field center aligned" *ngIf="!fileTooLarge">
                        <div>
                            <img class="app-icon" [src]="_workflow.icon" alt="application icon" *ngIf="_workflow.icon">
                        </div>
                        <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
                        </app-upload-button>
                    </div>
                    <div class="ui sixteen wide red message field center aligned" *ngIf="fileTooLarge"
                        [textContent]="'common_file_too_large' | translate"></div>
                    <div class="five wide right aligned field" *ngIf="!fileTooLarge">
                        <button class="ui green button" [class.loading]="loading" name="updateiconButton"
                            (click)="updateIcon()" [class.loading]="loading" [disabled]="loading">{{
                            'btn_save' | translate }}
                        </button>
                        <button class="ui red button" [class.loading]="loading" *ngIf="!iconUpdated && workflow.icon"
                            name="deleteiconButton" (click)="deleteIcon()" [class.loading]="loading"
                            [disabled]="loading">{{
                            'btn_delete' | translate }}
                        </button>
                    </div>
                </div>
            </div>
        </app-zone-content>
    </app-zone>
    <app-zone header="Administration">
        <app-zone-content class="bottom">
            <form class="ui form" (ngSubmit)="onSubmitWorkflowUpdate()" #workflowUpdateFrom="ngForm">
                <div class="field">
                    <label>{{'workflow_name' | translate}}</label>
                    <input type="text" name="formWorkflowUpdateName" placeholder="{{ 'workflow_name' | translate}}"
                        [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)"
                        [(ngModel)]="workflow.name" [disabled]="loading" required #formWorkflowUpdateName="ngModel"
                        pattern="^[a-zA-Z0-9._-]{1,}$">
                    <div *ngIf="formWorkflowUpdateName && formWorkflowUpdateName.invalid && !formWorkflowUpdateName.pristine"
                        class="ui error message">
                        <p>{{'workflow_update_name_error' | translate}}</p>
                    </div>
                </div>
                <div class="field">
                    <label>{{'common_description' | translate}}</label>
                    <textarea name="description" class="ui" [(ngModel)]="_workflow.description"
                        [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)"></textarea>
                </div>
                <div class="field">
                    <label>
                        {{ 'workflow_sidebar_tag_zone' | translate }}
                        <i class="circle outline question icon" suiPopup [popupText]="'workflow_tag_dragdrop' | translate"></i>
                    </label>
                    <ng-container *ngIf="selectedTags && selectedTags.length > 0">
                        <div class="ui horizontal list dragula-container" [dragula]="'bag-tag'" [(dragulaModel)]="selectedTags">
                            <div class="item" *ngFor="let t of selectedTags; let i = index">
                                <div class="ui label">
                                    {{t + '  '}}
                                    <i class="close icon" *ngIf="!workflow.from_repository && workflow.permission === 7" (click)="removeFromSelectedTags(i)"></i>
                                </div>
                            </div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!selectedTags || selectedTags.length === 0">
                        <div class="ui info message">
                            {{ 'workfow_tag_no' | translate }}
                        </div>
                    </ng-container>
                    <div class="ui inline fields" *ngIf="existingTags.length > 0">
                        <div class="ui twelve wide field">
                            <sui-multi-select name="sidebartagzone" class="fluid selection"
                                        [isDisabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)"
                                        [options]="existingTags" [isSearchable]="true"
                                        [(ngModel)]="tagsToAdd"
                                         #tagSelect>
                                <sui-select-option *ngFor="let i of tagSelect.filteredOptions" [value]="i">
                                </sui-select-option>
                            </sui-multi-select>
                        </div>
                        <div class="ui four wide field">
                            <div class="ui icon blue button" [class.disabled]="!tagsToAdd" (click)="updateTagMetadata()">
                                <i class="plus icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>{{ 'workflow_history_length_title' | translate }}</label>
                    <div class="fields">
                        <div class="three wide field">
                            <input type="number" name="formWorkflowUpdateHistory"
                                placeholder="{{ 'workflow_history_length' | translate}}" [disabled]="loading || (workflow.from_repository && workflow.from_repository.length >
                                0)" [(ngModel)]="_workflow.history_length" [disabled]="loading" required
                                #formWorkflowUpdateHistory="ngModel" min="1" max="500">
                        </div>
                        <div class="thirteen wide field">
                            <sui-select name="sidebartagzonehistory" class="selection" *ngIf="existingTags.length > 0"
                                [(ngModel)]="purgeTag" [options]="existingTags" [isSearchable]="true" [isDisabled]="loading || (workflow.from_repository && workflow.from_repository.length >
                                0)" #SelectPurge>
                                <sui-select-option *ngFor="let i of SelectPurge.filteredOptions" [value]="i">
                                </sui-select-option>
                            </sui-select>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>{{ 'workflow_runnumber_title' | translate }}</label>
                    <input type="number" name="formWorkflowRunNumUpdateNumber"
                        placeholder="{{ 'common_loading' | translate}}" [(ngModel)]="runnumber" required
                        #formWorkflowRunNumUpdateNumber="ngModel">
                </div>
                <div class="submitbutton">
                    <ng-container *ngIf="workflow.from_repository && workflow.from_repository.length > 0">
                        <div class="ui right floated">
                            <button class="ui green button" type="button" [class.loading]=" loading"
                                (click)="updateRunNumber()">
                                {{'btn_save' | translate}}
                            </button>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!workflow.from_repository || workflow.from_repository.length === 0">
                        <button class="ui green right floated button" type="submit" name="savebtn"
                            [class.loading]="loading" [disabled]="loading">
                            {{'btn_save' | translate}}
                        </button>
                    </ng-container>
                </div>
                <app-warning-modal [title]="_translate.instant('warning_modal_title')"
                    [msg]="_translate.instant('warning_modal_body')" (event)="onSubmitWorkflowUpdate(true)"
                    #updateWarning>
                </app-warning-modal>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'danger_zone' | translate }}" headerClass="red inverted">
        <app-zone-content class="bottom">
            <div class="ui grid">
                <div class="eight wide column">
                    <div class="title">{{ 'workflow_delete_label' | translate}}</div>
                    <div class="description">{{ 'workflow_delete_description' | translate}}</div>
                </div>
                <div class="eight wide right aligned column">
                    <app-delete-button [loading]="loading" (event)="deleteWorkflow()"></app-delete-button>
                </div>
            </div>
        </app-zone-content>
    </app-zone>
</div>
